export default class categoryEcharts {
  constructor(xAxisData = [], seriesData = [], title = '', legendData = [], xAxisSize = 1) {
    if (xAxisData.length > 10) {
      this.setDataZoom();
    }
    if (xAxisSize == 1) {
      this.categoryOption.series[0].name = title;
      this.categoryOption.series = seriesData;
    } else {
      this.setOneThanMoreSeries(seriesData);
    }
    this.categoryOption.title.text = title;
    this.categoryOption.xAxis[0].data = xAxisData;
    this.categoryOption.legend.data = legendData;
  }

  setSeries(series) {
    this.categoryOption.series = series;
    return this.categoryOption;
  }

  setLegend(legend) {
    this.categoryOption.legend = legend;
    return this.categoryOption;
  }

  setGrid(grid) {
    this.categoryOption.grid = grid;
    return this.categoryOption;
  }

  setColor(color) {
    if (color) {
      this.categoryOption.color = color;
      return this.categoryOption;
    }
      return this.categoryOption;
  }

  setTitle(title) {
    this.categoryOption.title = title;
    return this.categoryOption;
  }

  setDataZoom() {
    this.categoryOption.dataZoom = [{
      type: 'inside',
    }, {
      type: 'slider',
    }];
    return this.categoryOption;
  }

  getOption() {
    return this.categoryOption;
  }

  categoryOption = {
    title: {
      text: '默认标题',
      x: 'left',
      top: 20,
    },
    color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      type: 'scroll',
      orient: 'horizontal',
      top: 30,
      right: 0,
      data: [],
      formatter: (name) => {
        if (name.length <= 8) {
          return name;
        } else if (name.length > 8 && name.length <= 16) {
          return `${name.slice(0, 8)}\n${name.slice(8, 16)}`;
        } else if (name.length > 16 && name.length <= 24) {
          return `${name.slice(0, 8)}\n${name.slice(8, 16)}\n${name.slice(16, 24)}`;
        } else if (name.length > 24 && name.length <= 32) {
          return `${name.slice(0, 8)}\n${name.slice(8, 16)}\n${name.slice(16, 24)}\n${name.slice(24)}`;
        } else if (name.length > 32) {
          return `${name.slice(0, 8)}\n${name.slice(8, 16)}\n${name.slice(16, 24)}\n${name.slice(24, 32)}...`;
        }
      },
    },
    grid: {
      top: 70,
      left: 20,
      right: 20,
      bottom: 40,
      containLabel: true,
    },
    xAxis: [{
      type: 'category',
      data: [],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: '#333',
        },
        interval: 0,
        formatter(value) {
          let ret = ''; // 拼接加\n返回的类目项
          const maxLength = 2; // 每项显示文字个数
          const valLength = value.length; // X轴类目项的文字个数
          const rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
          if (rowN > 1) // 如果类目项的文字大于3,
          {
            for (let i = 0; i < rowN; i++) {
              let temp = ''; // 每次截取的字符串
              const start = i * maxLength; // 开始截取的位置
              const end = start + maxLength; // 结束截取的位置
              // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
              temp = `${value.substring(start, end)}\n`;
              ret += temp; // 凭借最终的字符串
            }
            return ret;
          }
            return value;
        },
      },
    }],
    yAxis: [{
      type: 'value',
    }],
    series: [{
      name: '数量',
      type: 'bar',
      barWidth: '60%',
      data: [],
      label: {
        align: 'left',
        normal: {
          formatter(v) {
            const name = v.name;
            if (name.length <= 8) {
              return name;
            } else if (name.length > 8 && name.length <= 16) {
              return `${name.slice(0, 8)}\n${name.slice(8, 16)}`;
            } else if (name.length > 16 && name.length <= 24) {
              return `${name.slice(0, 8)}\n${name.slice(8, 16)}\n${name.slice(16, 24)}`;
            } else if (name.length > 24 && name.length <= 32) {
              return `${name.slice(0, 8)}\n${name.slice(8, 16)}\n${name.slice(16, 24)}\n${name.slice(24)}`;
            } else if (name.length > 32) {
              return `${name.slice(0, 8)}\n${name.slice(8, 16)}\n${name.slice(16, 24)}\n${name.slice(24, 32)}...`;
            }
          },
          textStyle: {
            // fontSize : 10
          },
        },
      },
    }],

  };

  setOneThanMoreSeries(seriesData) {
    for (let i = 0; i < seriesData.length; i++) {
      this.categoryOption.series[i] = {
        type: 'bar',
        data: [],
        label: {
          align: 'left',
          normal: {
            formatter(v) {
              const name = v.name;
              if (name.length <= 8) {
                return name;
              } else if (name.length > 8 && name.length <= 16) {
                return `${name.slice(0, 8)}\n${name.slice(8, 16)}`;
              } else if (name.length > 16 && name.length <= 24) {
                return `${name.slice(0, 8)}\n${name.slice(8, 16)}\n${name.slice(16, 24)}`;
              } else if (name.length > 24 && name.length <= 32) {
                return `${name.slice(0, 8)}\n${name.slice(8, 16)}\n${name.slice(16, 24)}\n${name.slice(24)}`;
              } else if (name.length > 32) {
                return `${name.slice(0, 8)}\n${name.slice(8, 16)}\n${name.slice(16, 24)}\n${name.slice(24, 32)}...`;
              }
            },
            textStyle: {
              fontSize: 14,
            },
          },
        },
      };
      this.categoryOption.series[i] = {
        ...this.categoryOption.series[i],
        ...seriesData[i],
      };
    }
  }
}
